<script setup>
import {ref, onMounted, watchEffect} from 'vue'
import useAccountStore from "@/store/modules/AccountStore.js";
import {showImagePreview} from 'vant';
import 'vant/es/image-preview/style'

const accountStore = useAccountStore()

const avatar = ref('')
const avatarBg = ref('')
onMounted(() => {
  avatar.value = accountStore.user?.avatar
  avatarBg.value = accountStore.user?.avatarBg
})

// 图片预览
const imgPreview = (url) => {
  showImagePreview([url]);
}
</script>

<template>
  <div class="avatar"
       :style="{backgroundImage: `url(${avatarBg})`}"
  >
    <div class="container relative pt-20 pb-4 flex justify-center items-end back"
         @click.self="imgPreview(avatarBg)"
    >
      <!--<div class="glass-container absolute bottom-0 left-0 h-12 w-full"></div>-->
      <div
          class="avatar z-10 w-20 h-20 mr-4 rounded-2xl shadow-2xl overflow-hidden flex-center"
          @click.stop="imgPreview(avatar)"
      >
        <img :src="avatar" alt="">
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.avatar {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;

  .container {
    //backdrop-filter: blur(2px) brightness(90%);
    backdrop-filter: brightness(90%);
  }
}
</style>